<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<div id="vcomments" style="padding: 10px 0px 0px 0px"></div>

<style>
  .v .veditor {
    min-height: 10rem;
    background-image: url('<%= site.customConfig.valineimage %>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255, 255, 255, 0);
    resize: none;
  }

  .v .vwrap {
    border: 1px solid #000 !important;
  }

  .v .vbtn {
    padding: .4rem 1.2rem !important;
    border-color: #fff !important;
    background-color: #49b1f5 !important;
    color: #fff !important;
    font-size: .7rem !important;
  }

  .v .vcards .vcard .vh .vmeta .vat {
    padding: 0 .8rem !important;
    border: 1px solid #00c4b6 !important;
    border-radius: 5px !important;
    color: #00c4b6 !important;
  }
</style>
<script>
  new Valine({
    el: '#vcomments',
    appId: '<%= site.customConfig.appID %>',
    appKey: '<%= site.customConfig.appKey %>',
    avatar: '<%= site.customConfig.avatar %>',
    placeholder: '<%= site.customConfig.placeholder %>',
    pageSize: '<%= site.customConfig.pageSize %>',
    lang: '<%= site.customConfig.lang %>',
    enableQQ: 'true' === '<%= site.customConfig.enableQQ %>',
    visitor: 'true' === '<%= site.customConfig.visitor %>',
    highlight: 'true' === '<%= site.customConfig.highlight %>',
    avatarForce: 'true' === '<%= site.customConfig.avatarForce %>',
  });
</script>